/*
 * @Description:包车首页-优选好车
 * @Author: ziwei.ma
 * @Date: 2019-07-10 09:42:27
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-27 16:49:10
 */

<template>
  <div class="bus-list-warpper flex-v">
    <div class="title-warpper flex-h flex-hsb flex-vc">
      <div class="title">优选好车</div>
      <div
        class="more-btn flex-h flex-vc"
        @click="goToBusList"
      >
        <span class="fontsize28">更多</span>
        <img src="../assets/jiantou2.png">
      </div>
    </div>
    <!-- 优选好车item -->
    <template v-if="!isNoData">
      <div
        v-show="showType===1"
        class="bus-item"
        @click="goToBusDetail(option.busID)"
        v-for="(option,index) in optimizeBusList"
        :key="index"
      >
        <img :src="option.masterPicUrl">
        <div class="flex-h">
          <span class="bus-name fontsize32 flex1">{{option.busName}}</span>
          <span class="bus-seats fontsize28">{{option.availableSeat}}座</span>
        </div>
      </div>
    </template>
    <!-- 无数据 -->
    <no-data v-else></no-data>
    <!-- 无网络 -->
    <net-error
      v-show="showType===0"
      @click.native="afreshData"
    ></net-error>
  </div>
</template>

<script>
import { getOptimizeBus } from '../api/api'
import NoData from './NoData'
import NetErrorVue from '../../../components/NetError'
const SHOW_DATA = 1
const NET_ERROR = 0
export default {
  components: {
    'no-data': NoData,
    'net-error': NetErrorVue
  },
  data() {
    return {
      optimizeBusList: [],
      isNoData: false,
      showType: 1
    }
  },
  methods: {
    // 点击【更多】跳转车辆列表
    goToBusList() {
      this.$AppRouterUtils.open('bcBusList.html?_tv=true')
    },
    // 点击车辆进入车辆详情
    goToBusDetail(busID) {
      this.$AppRouterUtils.open('bcBusDetail.html?_tv=true&busID=' + busID)
    },
    afreshData() {
      this._getOptimizeBus()
    },
    _getOptimizeBus() {
      // 获取优选好车列表
      getOptimizeBus(5, 1).then(res => {
        this.optimizeBusList = res
        this.showType = SHOW_DATA
        if (this.optimizeBusList.length === 0) {
          this.isNoData = true
        }
        this.$emit('busListLength', this.optimizeBusList.length)
      }).catch(err => {
        if (err.error.code === 'ECONNABORTED') {
          this.showType = NET_ERROR
        }
        console.dir(err)
      })
    }
  },
  mounted() {
    // 获取优选好车列表
    this._getOptimizeBus()
  }
}
</script>

<style scoped>
.bus-list-warpper {
  margin-top: 16px;
  width: 686;
  padding: 0 32px;
  background-color: #fff;
}
.title-warpper {
  height: 112px;
}
.title {
  font-size: 36px;
  font-weight: 500;
}
.more-btn > span {
  color: #999999;
}
.more-btn > img {
  width: 48px;
  height: 48px;
}
.bus-item {
  width: 686px;
  min-height: 372px;
  box-shadow: 0 0 20px #e8e9ea;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 32px;
}
.bus-item > img {
  width: 686px;
  height: 296px;
  overflow: hidden;
}
.bus-item > div {
  padding: 16px 32px;
  min-height: 76px;
  color: #666666;
  box-sizing: border-box;
}
.bus-name {
  font-weight: 500;
}
</style>
